﻿<template>
    <!-- 内部有header或者footer时候垂直布局 -->
    <el-container direction="vertical">
        <el-header>
            <!-- 尾部对其 -->
            <el-row justify="end">
                <el-col :span="3">
                    <el-button type="primary" :icon="Search" @click="searchVisible = !searchVisible">Search</el-button>
                </el-col>
            </el-row>
        </el-header>

        <el-dialog v-model="searchVisible" class="highsearchdialog">
            <div v-for="(sd, index) in searchData" :key="index">
                <el-row v-if="sd && sd.length > 0 && index == 'environment'">
                    <el-col :span="3" class="label">场景</el-col>
                    <el-col :span="20">
                        <el-checkbox-group v-model="checkEnv">
                            <el-checkbox v-for="item in sd" :key="item.id" :label="item.name" :value="item.id">
                                {{ item.name }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-col>
                </el-row>
                <el-row v-if="sd && sd.length > 0 && index == 'state'">
                    <el-col :span="3">状态</el-col>
                    <el-col :span="20">
                        <el-checkbox-group v-model="checkSta">
                            <el-checkbox v-for="item in sd" :key="item.id" :label="item.name" :value="item.id">
                                {{ item.name }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-col>
                </el-row>
            </div>
            <el-row>
                <el-button @click="handleSearch">确定</el-button>
                <el-button @click="cancelSearch">重置</el-button>
            </el-row>
        </el-dialog>

        <el-table :data="tableData" row-key="id">
            <el-table-column prop="title" label="作品名称" width="150">
            </el-table-column>
            <el-table-column prop="author" label="作者" width="150">
            </el-table-column>
            <el-table-column prop="area" label="所在区" width="150">
            </el-table-column>
            <el-table-column label="评审结果分布(人)" align="center">
                <el-table-column prop="prize1" label="一等奖">
                </el-table-column>
                <el-table-column prop="prize2" label="二等奖">
                </el-table-column>
                <el-table-column prop="prize3" label="二等奖">
                </el-table-column>
            </el-table-column>
            <el-table-column label="文件数量">
                <template #default="scope">
                    {{ scope.row.files?.length }}
                </template>
            </el-table-column>
            <el-table-column prop="state" label="状态">
                <template #default="scope">
                    {{ scope.row.state == 1 ?"已审核":"未审核" }}
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" min-width="120">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="handleClick(scope.row)">
                        编辑
                    </el-button>
                    <el-button link type="danger" size="small" @click="deleteClick(scope.row)"
                        onchange="">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <ViewTable :obj="curRow" :title="curRow.title" :author="curRow.author" :dialogFormVisible="showViewTable"
            @VTClose="tableCloseChildDialog" />

    </el-container>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import ViewTable from './tablecomponents/Edit.vue'
import { getList, setId, delId, Modify } from '../../api/table'
import { ElMessageBox, ElMessage } from 'element-plus'
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'

const tableData = ref([
    {
        'title': "接口请求前数据",
        'author': '鲁迅',
        'area': "中国",

    }
])

const searchData = ref({
    "area": [],
    "environment": [
        {
            "id": "A01",
            "name": "问卷调查"
        },
        {
            "id": "A03",
            "name": "活动评审"
        },
        {
            "id": "A09",
            "name": "星级评定"
        }
    ],
    "state": [
        {
            "id": 0,
            "name": "待审核"
        },
        {
            "id": 1,
            "name": "已审核"
        }
    ],
    "activename": []
})

//
const curRow = ref({})
const showViewTable = ref(false)
const checkEnv = ref(['A01'])
const checkSta = ref([])


const initData = async function () {
    var res = await getList({});
    console.log('请求getList接口返回', res);
    if (res && res.code === 20000) {
        console.log('data', res.data)
        tableData.value = res.data.items
    }
}


onMounted(async () => {
    console.log('onMounted')
})
console.log('开始setup中请求initData')
initData();

const searchVisible = ref(false)



const handleClick = async function (row) {
    console.log('查看之前row值', curRow.value)
    curRow.value = row;
    console.log('查看之后row值', curRow.value)
    console.log('查看之前弹框变量', showViewTable.value)
    showViewTable.value = true;
    console.log('查看之后弹框变量', showViewTable.value)
    //debugger

    var res = await setId({ "id": row.id });
    if (res && res.code == 20000) {
        ElMessage({
            message: `${res.data}`,
            type: 'success',
        })
    } else {
        ElMessage.error(`${res.data}`)
    }

}

const deleteClick = async function (row) {
    var res = await delId({ id: row.id });
    if (res && res.code === 101) {
        ElMessageBox.confirm(res.data)
            .then(async () => {
                var resConfirm = await delId({ id: row.id, confirmDelete: true })
                if (resConfirm && resConfirm.code === 20000) {
                    ElMessage({
                        type: 'success',
                        message: resConfirm.data,
                    });
                    console.log('二次删除后请求接口')
                    //刷新页面
                    await initData();
                }
            })
            .catch(() => {
                // catch error
            })
    }

}

const tableCloseChildDialog = function (val) {
    console.log('父组件接受到子组件事件了', val)
    curRow.value = {};
    showViewTable.value = val;
}

const handleSearch = async function () {
    console.log('搜索变动了', checkEnv.value, checkSta.value)
    var res = await getList({state:checkSta.value});
    console.log('请求getList接口返回', res);
    if (res && res.code === 20000) {
        console.log('data', res.data)
        tableData.value = res.data.items
    }
}
const cancelSearch = function(){
    checkEnv.value=[]
    checkSta.value=[]
}

</script>
<style lang="css" scoped>
.label {
    line-height: 32px;
    margin-right: 5px;
    color: #3d3d3d;
    flex-shrink: 0;
}

.highsearchdialog {
    width: 100%;
    max-width: 700px;

    .el-dialog__body {
        padding: 15px 5px 20px 20px;
    }
}
</style>